<template>
  <div class="con">
    <div class="header">
      <p>注册企业列表</p>
      <button @click="register()">立即注册</button>
    </div>
    <div class="nav">
        <div class="search">
      <input type="text" placeholder="请搜索公司名字" @keyup.enter="search()" v-model="searchname">
      <img src="../assets/images/search.png" alt @click="search()">
    </div>
    <div class="menu">
        <ul>
          <li  :class="{active:status==-1}" @click="query('-1')" >全部({{this.allCount}})</li>
          <li  :class="{active:status==0}" @click="query('0')">审核中<span style="color:#feae4d">({{this.auditCount}})</span></li>
          <li  :class="{active:status==1}" @click="query('1')">审核失败<span style="color:red">({{this.failCount}})</span></li>
          <li :class="{active:status==2}"  @click="query('2')">注册成功({{this.successCount}})</li>
        </ul>
    </div>

    </div>
  

    <div class="list" v-for="(item,index) in data" :key="index">
      <p class="title">{{item.merchantName}}</p>
      <p class="time">{{item.createTime}}</p>
      <p style="margin-top:10px;color:red" v-if="item.status=='1'">{{item.failureReason}}</p>
      <p style="margin-top:10px;color:orange" v-else-if="item.status=='0'">审核中</p>
      <p style="margin-top:10px;color:green" v-else-if="item.status=='2'">注册成功</p>
      <dl>
        <dd>地区</dd>
        <dt>{{item.address}}</dt>
      </dl>
      <dl>
        <dd>法人信息</dd>
        <dt>{{item.legalRepresent}} {{item.identityNo}}</dt>
      </dl>
      <dl>
        <dd>结算账户</dd>
        <dt>{{item.merchantName}}(*******************{{item.bankAccountNo}})</dt>
      </dl>
    </div>
    <Page :total="total" :current.sync="current" @on-change="changepage"></Page>
    <div style="height:100px"></div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      data: {},
      searchname: "",
      total: 100,
      current: 1,
      pageNumber: 1,
      status:-1,
      allCount:"",
      auditCount:"",
      failCount:"",
      successCount:""
    };
  },
  methods: {
    query(status){
      this.status=Number(status);
      this.pageNumber=1;
      this.current=1; 
      this.search(this.status);
    },
    search(key) {


      this.axios({
        method: "post",
        url: `${
          this.siteUrl
        }/app/PABC/interactive/interactiveQuery2?appid=web.2018&timestamp=${
          this.timestamp
        }`,
        data: {
          pageSize: "10",
          merChantName: this.searchname,
          pageNumber: this.pageNumber,
          status:this.status
        }
      })
        .then(response => {
          console.log(response)
          
          if (response.data.success == 1) {
            this.data = response.data.data.data;         
            this.allCount = response.data.data.allCount; 
              this.auditCount = response.data.data.auditCount;          
              this.failCount = response.data.data.failCount;            
              this.successCount = response.data.data.successCount;
              switch (key) {  
                case -1: this.total=response.data.data.allCount
                  
                  break;

                   case 0: this.total = response.data.data.auditCount;     
                  
                  break;
                   case 1: this.total = response.data.data.failCount;
                  
                  break;
                   case 2: this.total = response.data.data.successCount;
                  
                  break;
            
              }

            if (this.data.length == 0) {
              this.$Message.warning("查询没有结果");
            }
          } else {
            // this.$Message.warning(response.data.message);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    register() {
      this.$router.push({ name: "register" });
    },
    // 分页
    changepage(index) {
      this.pageNumber = index;
    
      this.search();
    }
  },
  mounted() {
    this.timestamp = Date.parse(new Date());

    this.search(-1)
   
    // this.axios({
    //   method: "post",
    //   url: `${
    //     this.siteUrl
    //   }/app/PABC/interactive/interactiveQuery2?appid=web.2018&timestamp=${
    //     this.timestamp
    //   }`,
    //   data: {
    //     pageSize: "10"
    //   }
    // })
    //   .then(response => {
    //     console.log(response)
      
    //     if (response.data.success == 1) {
    //       this.data = response.data.data.data;
    //       this.allCount = response.data.data.allCount; 
    //        this.auditCount = response.data.data.auditCount;          
    //           this.failCount = response.data.data.failCount;            
    //           this.successCount = response.data.data.successCount;
    //     } else {
    //       this.$Message.warning(response.data.message);
    //     }
    //   })
    //   .catch(function(error) {
    //     console.log(error);
    //   });
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
  width: 1024px;
  background: #fff9f2;
  margin: 0 auto;
}
.con .header {
  height: 100px;
  width: 100%;
  background: #feae4d;
  position: relative;
}
.con .header p {
  font-size: 30px;
  color: #fff;
  text-align: center;
  line-height: 100px;
}
.con button {
  position: absolute;
  width: 110px;
  height: 40px;
  background: #50e387;
  color: #fff;
  border-radius: 10px;
  font-size: 20px;
  right: 190px;
  top: 30px;
}
.con .nav{
  height: 154px;
  background: #fff;
  width: 100%;
  overflow: hidden;
}
.con .search {
  width: 658px;
  height: 44px;
  margin: 30px auto;
  position: relative;
}
.con .search input {
  width: 658px;
  height: 44px;
  border: 1px solid #feae4d;
  border-radius: 10px;
  text-indent: 10px;
  font-size: 18px;
}
.con .search img {
  width: 24px;
  position: absolute;
  right: 16px;
  top: 10px;
}
.con  .menu{
  width: 660px;
  margin: 0 auto;
}
.con  .menu li{
  width: 165px;
  height: 50px;
  text-align: center;
  float: left;
  font-size: 20px;
  cursor: pointer;


}
.con  .menu .active{
border-bottom: 4px solid #feae4d;
font-weight: bold;
}
.con .list {
  width: 658px;
  background: #fff;
  margin: 30px auto;
  padding: 40px 50px;
  box-shadow: 0px 4px 11px 0px #f5f5f5;
  border-radius: 5px;
  position: relative;
 
}
.con .list .title {
  font-weight: bold;
  font-size: 20px;
}
.con .list .time {
  position: absolute;
  right: 100px;
  top: 50px;
  color: #999;
}
dl {
  width: 100%;
  margin-top: 10px;
  height: 30px;
}
dl dt {
  width: 400px;
  float: left;
}
dl dd {
  width: 100px;
  float: left;
  color: #999;
}
</style>
